<template>
	<view  class="container">
		<view class="head">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @cancel="cancel">
			</uni-search-bar>
			<view class="order">
				<image src="../../static/排序.png" mode="widthFix" @click="changeOrder"></image>
			</view>
		</view>
		
		<uni-section :title="sectionTitle" type="line">
			<uni-list :border="true" v-for="comment in commentList">
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options"  @click="bindClick(comment.id)">
						<uni-list-item :title=comment.title :note=comment.content :rightText=comment.time
						showArrow :thumb=comment.pic thumb-size="base" />
					</uni-swipe-action-item>
				</uni-swipe-action>
			</uni-list>
			<view>
				<uni-load-more :status=statusFroSearch @clickLoadMore="loadMore()"></uni-load-more>
			</view>
		</uni-section>

		<view>
			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog type="warning" cancelText="关闭" confirmText="确认" title="确认" 
				content="是否确认删除评论" @confirm="confirmDel" @close="cancelDel"></uni-popup-dialog>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	
	Date.prototype.Format = function (fmt) {
	    var o = {
	        "M+": this.getMonth() + 1, // 月份
	        "d+": this.getDate(), // 日
	        "h+": this.getHours(), // 小时
	        "m+": this.getMinutes(), // 分
	        "s+": this.getSeconds(), // 秒
	        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
	        "S": this.getMilliseconds() // 毫秒
	    };
	    if (/(y+)/.test(fmt))
	        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	            return fmt;
	}
	
	export default {
		data() {
			return {
				apiUrl:"http://localhost:8080/",
				sectionTitle:"疑似存在敏感内容",
				searchValue:"",
				options:[{
				            text: '删除评论',
				            style: {
				                backgroundColor: '#007aff'
				            }
				        }],
				commentList:[],
				pageNum:1,
				pageSize:6,
				order:false,
				count:0,
				status:"more",
				end:false,
				nowId:0
			}
		},
		onShow(){
			this.clear();
			this.sectionTitle="疑似存在敏感内容";
			this.searchComments();
		},
		methods: {
			search() {
				this.clear();
				if(this.searchValue!=""){
					this.sectionTitle="搜索内容";
					this.searchComments();
					}
				else{
					this.sectionTitle="疑似存在敏感内容";
					this.searchComments();
				}
			},
			cancel(){
				this.clear();
				this.searchValue="";
				this.sectionTitle="疑似存在敏感内容";
				this.searchComments();
			},
			changeOrder(){
				this.order=!this.order;
				this.clear();
				this.searchComments();
			},
			searchComments(){
				console.log(uni.getStorageSync('token'));
				uni.request({
						method:'GET',
						url:this.apiUrl+'comment',
						header:{
								Authorization : uni.getStorageSync("token")
							},
						data:{
							'pageNum':this.pageNum,
							'pageSize':this.pageSize,
							'keyword':this.searchValue,
							'order':this.order
						},
						success: (res) => {
							console.log(res.data);
							let comments = res.data.records;
							let size =comments.length;
							console.log(size);
							for(let i =0;i<size;i++,this.count++){
								this.commentList.push({
									"id":comments[i].id,
									"fromUid":comments[i].fromUid,
									"title":comments[i].fromName + "评论了:",
									"content":comments[i].content,
									"time":comments[i].time,
									"pic":comments[i].picture
								});
							}
							
							if(size<this.pageSize){
								this.end = true;
								this.status = "no-more";
							}
							uni.stopPullDownRefresh()
						},
						fail: (err) => {
										return uni.showToast({
											icon: 'loading',
											title:'请求失败'
										})
										reject(err)
									}
					})
			},
			bindClick(id) {
				this.nowId = id;
				this.$refs.popup.open();
			},
			confirmDel(){
				this.deleteComment(this.nowId);
				// this.nowId=0;
				// this.clear();
				// this.searchComments();
			},
			cancelDel(){
				this.nowId=0;
			},
			deleteComment(id){
				uni.request({
						method:'DELETE',
						url:this.apiUrl+'comment/'+id,
						header:{
								Authorization : uni.getStorageSync("token")
							},
						success: (res) => {
							console.log(res.data);
							this.nowId=0;
							this.clear();
							this.searchComments();
							this.addOperation(id);
						},
						fail: (err) => {
										return uni.showToast({
											icon: 'loading',
											title:'请求失败'
										})
										reject(err)
									}
					})
			},
			loadMore(){
				if(this.end)return;
				this.pageNum += 1;
				this.searchComments();
			},
			clear(){
				this.status="more";
				this.commentList=[];
				this.pageNum=1;
				this.count=0;
				this.end=false;
			},
			addOperation(id){
				var time = new Date().Format("yyyy-MM-dd hh:mm:ss");
				console.log(time);
				uni.request({
						method:'POST',
						url:this.apiUrl+'operation',
						header:{
							Authorization : uni.getStorageSync("token")
							},
						data:{
							'time':time,
							'adminId':uni.getStorageSync("uid"),
							'type':"删除评论",
							'sourceId':id
						},
						success: (res) => {
							console.log(res.data);
						},
						fail: (err) => {
										return uni.showToast({
											icon: 'loading',
											title:'请求失败'
										})
										reject(err)
									}
					})
			}
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}
	.head{
		display: flex;
		flex-direction: row;
	}
	.head .uni-searchbar{
		width: 85%;
	}
	.head .order{
		position: relative;
		padding-top: 18px;
	}
	.head image{
		width: 20px;
	}
	uni-list-item__icon-img uni-list--base{
		border-radius: 51px;
		width: 40px;
		height: 40px;
	}
</style>
